<template>
  <view class="article-container">
    <!-- 文章标题 -->
    <text class="article-title" selectable="true">
      前端开发技术发展趋势分析
    </text>

    <!-- 加载进度条 -->
    <progress 
      v-if="showProgress" 
      :percent="progressPercent" 
      stroke-width="3" 
      class="progress-bar"
    ></progress>

    <!-- 文章内容 -->
    <rich-text :nodes="articleContent" class="article-content"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progressPercent: 0, // 进度条百分比
      showProgress: true, // 控制进度条显示/隐藏
      articleContent: `
        <div class="content-section">
          <p>随着互联网技术的飞速发展，前端开发领域也在不断革新。从早期的静态网页到如今的复杂单页应用，前端技术栈已经发生了翻天覆地的变化。</p>
          
          <h3>一、框架化趋势明显</h3>
          <p>目前主流的前端框架如Vue、React和Angular已经成为企业级应用开发的首选，组件化开发思想深入人心，极大提高了开发效率和代码复用率。</p>
          
          <h3>二、跨端开发成为常态</h3>
          <p>通过Electron、React Native等技术，前端开发者可以使用同一套代码开发出运行在不同平台的应用，降低了跨平台开发的成本。</p>
          
          <h3>三、工程化与自动化</h3>
          <p>现代前端开发已经形成了完整的工程化体系，包括代码检查、打包构建、自动化测试等环节，保证了代码质量和开发效率。</p>
          
          <p>本文作者：<strong>学号：2531010120120 姓名：林铭恒</strong></p>
        </div>
      `
    };
  },
  mounted() {
    // 进度条动画逻辑：2秒内从0到100%
    const duration = 2000; // 总时长2000ms
    const interval = 20; // 每20ms更新一次
    const step = 100 / (duration / interval); // 每次更新的步长
    
    const timer = setInterval(() => {
      this.progressPercent += step;
      
      // 当进度达到100%时，清除定时器并隐藏进度条
      if (this.progressPercent >= 100) {
        this.progressPercent = 100;
        clearInterval(timer);
        // 稍微延迟隐藏，确保100%状态可见
        setTimeout(() => {
          this.showProgress = false;
        }, 100);
      }
    }, interval);
  }
};
</script>

<style scoped>
.article-container {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  min-height: 100vh;
}

.article-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  line-height: 1.5;
  margin-bottom: 20rpx;
  display: block;
}

.progress-bar {
  width: 100%;
  margin-bottom: 30rpx;
  height: 8rpx;
}

.article-content {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.8;
}

/* 富文本内容样式 */
.content-section h3 {
  font-size: 32rpx;
  color: #333333;
  margin: 30rpx 0 15rpx 0;
}

.content-section p {
  margin-bottom: 20rpx;
}
</style>